<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="head" style="margin-bottom: 10px;">
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title bold" style="width: auto">{{new Date(searchData.realtime).Format('M月d日')}}数据详情</p>
						</div>
						
						<div class="form-item right" style="margin-right: 0;">
							<el-button class="add-btn" type="primary left" @click="exportExcel">数据导出</el-button>
							<el-button type="primary left" @click="back">返回</el-button>
						</div>
					</div>
				</div>
			</div>
			<template v-if="list.length">
				<div class="table-wrap">
					<el-table ref="table" row-key="crmstatisticid" show-summary :summary-method="getSummaries" v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column prop="username" :label="level==1?'渠道名称':'员工姓名'" min-width="80"></el-table-column>
						<el-table-column prop="realtime" label="日期" min-width="80"></el-table-column>
						<el-table-column prop="totalclue" label="线索数量" min-width="66"></el-table-column>
						<el-table-column prop="validclue" label="有效线索" min-width="66"></el-table-column>
						<el-table-column prop="validrate" label="有效率" min-width="60"></el-table-column>
						<el-table-column prop="typea" label="A类客户" min-width="66"></el-table-column>
						<el-table-column prop="typeb" label="B类客户" min-width="66"></el-table-column>
						<el-table-column prop="typec" label="C类客户" min-width="66"></el-table-column>
						<el-table-column prop="customerrate" label="客户转化率" min-width="80"></el-table-column>
						<el-table-column prop="dealclue" label="成交" min-width="40"></el-table-column>
						<el-table-column prop="dealrate" label="转化率" min-width="60"></el-table-column>
						<el-table-column prop="totalamount" label="金额(元)" min-width="64">
							<template slot-scope="scope">
								<span>{{(scope.row.totalamount/100).toFixed(2)}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="singleamount" label="客单价(元)" min-width="74">
							<template slot-scope="scope">
								<span>{{(scope.row.singleamount/100).toFixed(2)}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>
		<input type="hidden" name="" id="" :value="user" />
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import {exportExcel} from '@/utils/common'
	export default {
		name: 'DataStatisticsDetail',
		components: {
			NoData,
		},
		data() {
			const that=this
			return {
				loading: false,
				level:'',
				totalCount: 0,
				searchData: {
					shownum: 10,
					pagenow: 1,
					parentid:this.$route.params.id,
					realtime:this.$route.params.date,
					category:this.$route.params.category,
				},
				list: [],
			}
		},
		computed:{
			user(){
				if(this.$store.state.user){
					this.level=this.$store.state.user.crmLevel
				}
				return this.$store.state.user
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			getData() {
				this.loading = true
				console.log(this.searchData)
				this.$request.queryDataStatisticsDetail(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list = res.list
							this.totalCount = res.page.totalresult
							this.sum=res.sumall
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},
			getSummaries(){
				var {totalclue,validclue,validrate,typea,typeb,typec,customerrate,dealclue,dealrate,totalamount,singleamount}=this.sum
				return ['总计','-',totalclue,validclue,validrate,typea,typeb,typec,customerrate,dealclue,dealrate,(totalamount/100).toFixed(2),(singleamount/100).toFixed(2)]
			},
			exportExcel(){
				this.$request.exportDetail(this.searchData)
				.then(res=>{
					exportExcel(res,'crm '+this.searchData.realtime+'数据统计详情表')
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.page {
		.head {
			border-bottom: 10px solid #f5f5f5;
			padding: 0 20px;
		}
		.search-wrap {
			padding: 24px 10px 8px;
			.el-button {
				img,
				i {
					margin-right: 3px;
				}
				i {
					font-size: 12px;
					font-weight: bold;
				}
			}
		}
		>>>.el-table {
			th {
				>.cell {
					padding-left: 6px;
					padding-right: 6px;
					text-align: center;
				}
			}
			td {
				>.cell {
					padding-left: 4px;
					padding-right: 4px;
					text-align: center;
					font-size: 12px;
					line-height: 16px;
				}
			}
		}
	}
	
	
</style>